<template>
  <!-- 总结modules:
            封装抽离
               store/modules/模块名(xxx).js
               export default {
                    namespaced:true,
                    state:{
                      num:1
                      // 调用： this.$store.state.xxx.num
                    },
                    mutations:{
                       setNum(state,value){
                        state.num=value
                       }
                       // 调用：this.$store.commit('xxx/setNum',value实参)
                    },
                    actions:{
                        refreshNum(ctx,value){
                          setTimeout(()=>{
                            ctx.commit('setNum',value)
                          },2000)
                        }
                        // 调用：this.$store.dispatch('xxx/refreshNum',value实参)
                    },
                    getters:{
                      getNum(state){
                        return '数量:'+state.num
                      }
                      // 调用： this.$store.getters['xxx/getNum']
                    }
               }
               store/index.js
                 import xxx from  ..
                 modules:{
                  xxx
                 }   -->

  <div>
    <h2>访问getters:{{ $store.getters.getUsername }}</h2>
    <hr />
    <h2>modules使用</h2>
    <h3>state使用：{{ $store.state.user.usera }}</h3>
    <button @click="$store.commit('user/setUsera', 'usera的李四')">
      修改user下的usera
    </button>
    <button @click="$store.dispatch('user/useraActions', 'usera的王五')">
      调用actions修改user下的usera
    </button>
    <hr />
    <h3>user模块下的getters访问：{{ $store.getters['user/getUsera'] }}</h3>
    <hr />
    <h3>{{ $store.getters['user/test'] }}</h3>
    <hr />
    <button @click="btnClick">调用actions</button>
    <hr />
    <h2>{{ usera }}</h2>
    <hr />
    <h2>{{ getUsera }}</h2>
    <hr />
    <button @click="setUsera('xxxxx')">调用mapMtations</button>
    <!-- this.$store.dispatch('模块名/方法名',实参) 
        mapActions调用： this.方法名(实参)  -->
    <button @click="useraActions('oooooooo')">调用mapActions</button>
    <button @click="getData">点击调用接口</button>
  </div>
</template>
<script>
/*
mapState:
   1:导入  import {mapState} from 'vuex'
   2:定义：
      computed:{
        ...mapState('模块名',['state属性名'])
      }
   3:访问：this.state属性名
mapGetters:
   1:导入  import {mapGetters} from 'vuex'
   2:定义：
      computed:{
        ...mapGetters('模块名',['getters方法名'])
      }
   3:访问：this.getters方法名
mapMutations
   1:导入  import {mapMutations} from 'vuex'
   2:定义：
      methods:{
        ...mapMutations('模块名',['Mutations方法名'])
      }
   3:访问：this.Mutations方法名(实参值)
mapActions
   1:导入  import {mapActions} from 'vuex'
   2:定义：
      methods:{
        ...mapActions('模块名',['Actions方法名'])
      }
   3:访问：this.Actions方法名(实参值)
*/

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import axios from 'axios'
export default {
  computed: {
    ...mapState('user', ['usera']),
    ...mapGetters('user', ['getUsera'])
  },
  methods: {
    ...mapMutations('user', ['setUsera']),
    ...mapActions('user', ['useraActions']),
    btnClick () {
      this.$store.dispatch('user/testActions')
    },
    async getData () {
      const res = await axios({
        url: 'https://autumnfish.cn/api/joke/list?num=10'
      })
      console.log(res)
    }
  }
}
</script>
<style></style>
